<template>
  <div class="tenantMessageSettingEdit">
    <el-form ref="form" :model="formParams" label-width="125px">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="消息类别：">
            <el-input v-model="formParams.categoryName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消息代码：">
            <el-input v-model="formParams.code" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="消息名称：">
            <el-input v-model="formParams.name" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="系统消息：">
            <div class="member-content">
              <div>
                <span @click="choiceClick(6)" class="span-font">请选择</span>
              </div>
              <div v-show="formParams.sysMsgTemplate.templateCode">
                <el-form ref="form" :model="formParams.sysMsgTemplate" label-width="110px">
                  <el-form-item label="模板编码：">
                    <div>
                      {{ formParams.sysMsgTemplate.templateCode }}
                    </div>
                  </el-form-item>
                  <el-form-item label="模板名称：">
                    <div>
                      {{ formParams.sysMsgTemplate.templateName }}
                    </div>
                  </el-form-item>
                  <el-form-item label="模板内容：">
                     <div class="member-content">
                      <pre-view class="cont-pre" >{{ formParams.sysMsgTemplate.templateContent }}</pre-view>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="企微消息：">
            <div class="member-content">
              <div>
                <span @click="choiceClick(7)" class="span-font">请选择</span>
              </div>
              <div v-show="formParams.wxCpMsgTemplate.templateId">
                <el-form ref="form" :model="formParams.wxCpMsgTemplate" label-width="110px">
                  <el-form-item label="模板编码：">
                    <div>
                      {{ formParams.wxCpMsgTemplate.templateId }}
                    </div>
                  </el-form-item>
                  <el-form-item label="模板名称：">
                    <div>
                      {{ formParams.wxCpMsgTemplate.title }}
                    </div>
                  </el-form-item>
                  <el-form-item label="模板内容：">
                     <div class="member-content">
                      <pre-view class="cont-pre" >{{ formParams.wxCpMsgTemplate.content }}</pre-view>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="短信消息：">
            <div class="member-content">
              <div>
                <span @click="choiceClick(4)" class="span-font">请选择</span>
              </div>
              <div v-show="formParams.smsMsgTemplate.templateCode">
                <el-form ref="form" :model="formParams.smsMsgTemplate" label-width="110px">
                  <el-form-item label="模板编码：">
                    <div>
                      {{ formParams.smsMsgTemplate.templateCode }}
                    </div>
                  </el-form-item>
                  <el-form-item label="模板名称：">
                    <div>
                      {{ formParams.smsMsgTemplate.templateName }}
                    </div>
                  </el-form-item>
                  <el-form-item label="模板内容：">
                     <div class="member-content">
                      <pre-view class="cont-pre" >{{ formParams.smsMsgTemplate.templateContent }}</pre-view>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="邮件消息：">
            <div class="member-content">
              <div>
                <span @click="choiceClick(5)" class="span-font">请选择</span>
              </div>
              <div v-show="formParams.emailMsgTemplate.templateCode">
                <el-form ref="form" :model="formParams.emailMsgTemplate" label-width="110px">
                  <el-form-item label="模板编码：">
                    <div>
                      {{ formParams.emailMsgTemplate.templateCode }}
                    </div>
                  </el-form-item>
                  <el-form-item label="模板名称：">
                    <div>
                      {{ formParams.emailMsgTemplate.templateName }}
                    </div>
                  </el-form-item>
                  <el-form-item label="模板内容：">
                     <div class="member-content">
                      <pre-view class="cont-pre" >{{ formParams.emailMsgTemplate.templateContent }}</pre-view>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog :title="titles" :visible.sync="templateDialogEnable" width="50%" append-to-body>
      <template-dialog v-if="types" :types="types" :receiverType="receiverType" @selectedRow="templateSelected" />
      <div class="dialog-footer">
        <el-button @click="templateDialogEnable = false">取消</el-button>
        <el-button type="primary" @click="templateConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { viewMsgBindConfig } from '@/api/messageSetting'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    templateDialog: () => import('./templateDialog.vue')
  },
  props: {
    msgBindId: {
      type: Number,
      default: 1
    },
    receiverType: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      receiverType: 3,
      templateDialogEnable: false,
      formParams: {
        id: '',
        code: '',
        name: '',
        categoryName: '',
        smsMsgTemplate: {
          templateCode: '',
          templateName: '',
          templateContent: ''
        },
        wxCpMsgTemplate: {
          templateId: '',
          title: '',
          content: ''
        },
        emailMsgTemplate: {
          templateCode: '',
          templateName: '',
          templateContent: ''
        },
        sysMsgTemplate: {
          templateCode: '',
          templateName: '',
          templateContent: ''
        }
      },
      rowObj: '',
      types: null,
      titles: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      viewMsgBindConfig(this.msgBindId).then(res => {
        if(res){
          this.formParams = res
          if (res.smsMsgTemplate === null) {
            this.formParams.smsMsgTemplate = { templateCode: '', templateName: '',templateContent: ''}
          }
          if (res.emailMsgTemplate === null) {
            this.formParams.emailMsgTemplate = { templateCode: '', templateName: '',templateContent: ''}
          }
          if (res.sysMsgTemplate === null) {
            this.formParams.sysMsgTemplate = { templateCode: '', templateName: '',templateContent: ''}
          }
          if (res.wxCpMsgTemplate === null) {
            this.formParams.wxCpMsgTemplate = { templateId: '', title: '', content: ''}
          }
        }else{
           this.formParams = { code: '', name: '',categoryName: ''}
           this.formParams.smsMsgTemplate = { templateCode: '', templateName: '',templateContent: ''}
           this.formParams.emailMsgTemplate = { templateCode: '', templateName: '',templateContent: ''}
           this.formParams.sysMsgTemplate = { templateCode: '', templateName: '',templateContent: ''}
           this.formParams.wxCpMsgTemplate = { templateId: '', title: '', content: ''}
        }
      })
    },
    // 选择
    choiceClick(i) {
      this.types = ''
      this.$nextTick(() => {
        this.types = i
      })
      switch (i) {
        case 4:
          this.titles = '短信消息列表'
          break
        case 5:
          this.titles = '邮件消息列表'
          break
        case 6:
          this.titles = '系统消息列表'
          break
        case 7:
          this.titles = '企业微信消息列表'
      }
      this.templateDialogEnable = true
    },
    templateSelected(row) {
      this.rowObj = row
    },
    // 确认
    templateConfirm() {
      if (this.rowObj === '') {
        this.$message.error('请选择消息！')
      } else {
        this.templateDialogEnable = false
        if(this.types === 4){
          this.formParams.smsMsgTemplate = this.rowObj
          this.formParams.smsMsgTemplateCode = this.rowObj.templateCode
        }else if(this.types === 5){
          this.formParams.emailMsgTemplate = this.rowObj
          this.formParams.emailMsgTemplateCode = this.rowObj.templateCode
        }else if(this.types === 6){
          this.formParams.sysMsgTemplate = this.rowObj
          this.formParams.sysMsgTemplateCode = this.rowObj.templateCode
        }else if(this.types === 7){
          this.formParams.wxCpMsgTemplate = this.rowObj
          this.formParams.cpMsgTemplateCode = this.rowObj.templateId
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.member-content{
  width: 95%;
  >div{
    .cont-pre{
      margin: 1;
      font-family: auto;
    }
    >span{
      cursor: pointer;
    }
  }
}
.span-font{
  color:#06F;
}
</style>
